import React, { Component } from 'react';
import { Layout, Dropdown, Menu, Button, Avatar, Popover, Calendar } from 'antd';
import {
	MenuUnfoldOutlined,
	MenuFoldOutlined,
	HomeOutlined,
	EditOutlined,
	LogoutOutlined,
	CalendarOutlined
} from '@ant-design/icons';
import moment from 'moment';
import MySider from '../components/MySider/MySider';
import { Route, Switch } from 'react-router-dom';
import Home from '../pages/Home';
import QuotationManagement from '../pages/QuotationManagement';
import InquiryManagement from '../pages/InquiryManagement';
import OrderManagement from '../pages/OrderManagement';
import PersonalManagement from '../pages/PersonalManagement';
import { getToken, clearToken } from '../utils/auth';
import img from '../graghs/logo.png';
import './MyLayout.css';

const { Header, Content } = Layout;

class MyLayout extends Component {
	state = {
		collapsed: false
	};

	toggle = () => {
		this.setState({
			collapsed: !this.state.collapsed
		});
	};

	handleClick = (e) => {
		this.setState({
			current: e.key
		});
		const path = e.key.toString();
		this.props.history.push({
			pathname: path
		});
	};

	render() {
		const user = JSON.parse(getToken());
		const menu = (
			<Menu onClick={this.handleClick}>
				<Menu.Item key="/Home" icon={<HomeOutlined />}>
					个人首页
				</Menu.Item>
				<Menu.Item key="/Home/personalmanagement" icon={<EditOutlined />}>
					个人设置
				</Menu.Item>
				<Menu.Divider />
				<Menu.Item
					key="/"
					danger
					onClick={() => {
						clearToken();
						this.props.history.push('/');
					}}
					icon={<LogoutOutlined />}
				>
					退出登录
				</Menu.Item>
			</Menu>
		);
		const content = (
			<div
				style={{
					width: '300px',
					border: '1px solid #f0f0f0',
					borderradius: '2px'
				}}
			>
				<Calendar fullscreen={false} />
			</div>
		);
		return (
			<Layout style={{ height: '100vh' }}>
				<MySider trigger={null} collapsible collapsed={this.state.collapsed} />
				<Layout className="site-layout">
					<Header
						className="site-layout-background"
						style={{
							padding: 0,
							height: 71.5,
							boxShadow: 10
						}}
					>
						<div>
							<span>
								{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
									className: 'trigger',
									onClick: this.toggle
								})}
							</span>

							<img src={img} className="logo" />

							<span
								style={{
									marginLeft: '30%'
								}}
							>
								<Popover placement="bottom" content={content} trigger="click">
									<Button danger shape="round">
										<CalendarOutlined />
										Today&nbsp; : &nbsp;{moment().format('YYYY-MM-DD')}
									</Button>
								</Popover>
							</span>
							<span
								style={{
									marginLeft: '25%'
								}}
							>
								<Dropdown overlay={menu} placement="bottomCenter">
									<Button
										type="text"
										size="large"
										icon={<Avatar src={`http://imgdic.natapp1.cc${user.avatar}`} size="large" />}
									>
										&nbsp;&nbsp;&nbsp;{user.name}
									</Button>
								</Dropdown>
							</span>
						</div>
					</Header>
					<Content
						className="site-layout-background"
						style={{
							margin: '12px 12px',
							padding: 24,
							minHeight: 280,
							overflowY: 'auto'
						}}
					>
						<Switch>
							<Route path="/Home/quotationmanagement" component={QuotationManagement} />
							<Route path="/Home/inquirymanagement" component={InquiryManagement} />
							<Route path="/Home/ordermanagement" component={OrderManagement} />
							<Route path="/Home/personalmanagement" component={PersonalManagement} />
							<Route path="/Home" component={Home} />
						</Switch>
					</Content>
				</Layout>
			</Layout>
		);
	}
}

export default MyLayout;
